'use client';

import { Box, Progress, Step, StepIcon, StepIndicator, StepSeparator, StepStatus, StepTitle, Stepper, useSteps } from "@chakra-ui/react"
import { useEffect } from "react";

const steps = [
    { title: '连接'},
    { title: '允许'},
    { title: '设置'},
  ]
  
function LinkStatus({step = 0}: {step: number}) {
    const { activeStep, setActiveStep } = useSteps({
        index: 0,
        count: steps.length,
      })
    useEffect(() => {
        setActiveStep(step)
    }, [step])

    return (
        <Box position='relative' w={"25rem"} margin={"0 auto"}>
        <Stepper size='sm' index={activeStep} gap='0' colorScheme="red" className="link-status">
          {steps.map((step, index) => (
            <Step key={index}  className="!gap-0">
              <StepIndicator className="relative bg-transparent">
                <StepStatus complete={<StepIcon />} />
                <Box className="absolute top-8 w-10 ">
                    <StepTitle className="!font-medium !text-base">{step.title}</StepTitle>
                </Box>
              </StepIndicator>
              <StepSeparator className="!ms-0"/>
            </Step>
          ))}
        </Stepper>
      </Box>
    );
}

export default LinkStatus;